<template>
<!-- 首页 -->
  <el-container>
    <el-header>
      <template>
        <div class="header">
          <span>公司Logo</span>
          <span>后台管理系统</span>
          <el-button @click="secede">退出</el-button>
        </div>
      </template>
    </el-header>
    <el-container style="height: 100%;">
      <!-- 左侧导航栏，点击显示相应的右侧内容 -->
      <el-aside width="200px">
        <!-- :default-openeds="['1']"默认展开 -->
        <!-- default-active="/userlist"默认选中的子页面 -->
        <el-menu
          :unique-opened="true"
          background-color="#35475e"
          text-color="#fff"
          :router="true"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>用户管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/userlist"><i class="el-icon-menu"></i>用户列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-warning"></i>权限管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/rolelist"><i class="el-icon-menu"></i>角色列表</el-menu-item>
              <el-menu-item index="/powerlist"><i class="el-icon-menu"></i>权限列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-goods"></i>商品管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/goodslist"><i class="el-icon-menu"></i>商品列表</el-menu-item>
              <el-menu-item index="/parameter"><i class="el-icon-menu"></i>分类参数</el-menu-item>
              <el-menu-item index="/cate"><i class="el-icon-menu"></i>商品分类</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-order"></i>订单管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/orderlist"><i class="el-icon-menu"></i>订单列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-platform"></i>数据统计
            </template>
            <el-menu-item-group>
              <el-menu-item index="/record"><i class="el-icon-menu"></i>数据报表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 点击左侧导航显示对应的右侧内容 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    secede() {
      localStorage.removeItem("token");
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  width: 100%;
  height: 120px;
  background-color: #35475e;
  color: white;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  line-height: 60px;
  span {
    flex: 1;
    height: 100%;
  }
  height: 60px;
}
span:nth-child(2) {
  flex: 4;
}
.el-button {
  line-height: 20px;
}
.el-submenu {
  color: white;
  background-color: #35475e;
}
button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  // background-color: #eeeeee;
}
.el-container {
  width: 100%;
  height: 100%;
  .el-aside {
    height: 100%;
    background-color: #35475e;
  }
}
</style>
